<template>
    <div class="login_container">
        <div class="login_body">
            <div class="login-form">

                <div class="login-logo">
                    <!-- <img class="logo" :alt="appName" src="img/logo.png"> -->
					<h2>后台管理系统</h2>
                </div>
                
                <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
                    <el-form-item prop="username">
                        <el-input v-model="param.username" placeholder="用户名 / 手机 / 邮箱">
                            <template #prepend>
                                <el-button icon="el-icon-user"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                            <el-input type="password" clearable show-password placeholder="请输入密码" v-model="param.password" @keyup.enter="submitForm()">
                            <template #prepend>
                                <el-button icon="el-icon-lock"></el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <!-- 登录 -->
                    <el-dropdown  style="width: 40%;">
                        <el-button type="primary" style="width: 100%;" :loading="islogin" round>登 录<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="submitForm('ruleForm', 'admin')">
                                    <div class="demo-user-item">
                                        <div class="icon">
                                            <el-avatar src="img/avatar.jpg"></el-avatar>
                                        </div>
                                        <div class="info">
                                            <h2>Sakuya</h2>
                                            <p>超级管理员(Administrator)</p>
                                        </div>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item @click="submitForm('ruleForm', 'user')">
                                    <div class="demo-user-item">
                                        <div class="icon">
                                            <el-avatar src="img/avatar2.gif"></el-avatar>
                                        </div>
                                        <div class="info">
                                            <h2>Lolowan</h2>
                                            <p>普通用户(User)</p>
                                        </div>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
					</el-dropdown>

                    <el-dropdown  style="width: 40%;margin-left: 20%;">
                        <el-button type="success" style="width: 100%;" :loading="islogin" round>注册</el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>
                                    <div class="demo-user-item">
                                        <div class="info">
                                            <p>超级管理员</p>
                                        </div>
                                    </div>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <div class="demo-user-item">
                                        <div class="info">
                                            <p>普通用户</p>
                                        </div>
                                    </div>
                                </el-dropdown-item>
                            </el-dropdown-menu> 
                        </template>
                    </el-dropdown>


                    <!-- <div class="login-btn">
                        <el-button type="primary" @click="submitForm()">登录</el-button>
                    </div> -->
                    <!-- <p class="login-tips">Tips : 用户名和密码随便填。 shift+tab </p> -->
                </el-form>

                <el-divider>其他登录方式</el-divider>

				<div class="login-oauth">
					<el-button size="medium" type="primary" icon="el-icon-platform-eleme" circle></el-button>
					<el-button size="medium" type="success" icon="el-icon-s-goods" circle></el-button>
					<el-button size="medium" type="info" icon="el-icon-s-promotion" circle></el-button>
					<el-button size="medium" type="warning" icon="el-icon-menu" circle></el-button>
				</div>
            </div>
            <div class="login-sidebox">
				<div class="login-sidebox__title">
					<h2>SCUI</h2>
					<h4>高性能 / 精致 / 优雅</h4>
					<p>基于Vue3 + Element-Plus 的中后台前端解决方案。</p>
				</div>
				<img src="img/loginbg.svg"/>
			</div>
        </div>
        <div class="login-footer">© {{appName}} {{appVar}}</div>
    </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default {
    setup() {
        const router = useRouter();
        const param = reactive({
            username: "admin",
            password: "1231",
        });

        const rules = {
            username: [
                {
                    required: true,
                    message: "请输入用户名",
                    trigger: "blur",
                },
            ],
            password: [
                { required: true, message: "请输入密码", trigger: "blur" },
            ],
        };
        const login = ref(null);
        const submitForm = () => {
            login.value.validate((valid) => {
                if (valid) {
                    ElMessage.success("登录成功");
                    localStorage.setItem("ms_username", param.username);
                    router.push("/");
                } else {
                    ElMessage.error("登录成功");
                    return false;
                }
            });
        };

        const store = useStore();
        store.commit("clearTags");

        return {
            param,
            rules,
            login,
            submitForm,
        };
    },
};
</script>

<style scoped>
    .login_container {position: absolute;top:50%;left:50%;width: 1100px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
    .login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
    .login-form {width: 50%;padding: 60px 100px;background: #fff;}

    .login-footer {text-align: center;color: #999;margin-top: 50px;}

    .login-logo {text-align: center;margin-bottom: 30px;}
    .login-logo .logo {width: 70px;height: 70px;vertical-align: bottom;}
    .login-logo h2 {font-size: 24px;margin-top: 20px;color: #40485b;}

    .demo-user-item {display: flex;align-items: center;line-height: 1;padding:10px 0;}
	.demo-user-item .icon {margin-right: 20px;}
	.demo-user-item .info h2 {font-size: 14px;}
	.demo-user-item .info p {color: #666;margin-top: 6px;}

    .login-form {width: 50%;padding: 60px 100px;background: #fff;}
	.login-oauth {display: flex;justify-content:space-around;}
	.login-form .el-divider {margin-top:40px;}

    .login-sidebox {width: 50%;padding: 60px;color: #fff;background:#3887e5;position: relative;overflow: hidden;}
	.login-sidebox__title h2 {font-size: 30px;}
	.login-sidebox__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
	.login-sidebox__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
	.login-sidebox img {position: absolute;left:-120px;bottom:-160px;width: 550px;}

</style>